<template>
  <el-dialog title="数据表选择" v-model="state.visable" :close-on-click-modal="false" width="700px"
    class="Good-dialog table-dialog" lock-scroll append-to-body >
      <el-form @submit.native.prevent class="mb15">
          <el-form-item label="关键词" >
            <el-input v-model="state.keyword" placeholder="请输入关键词查询" clearable
              @keyup.enter.native="query()" style="max-width: 180px"/>
              <el-button type="primary" @click="query()" class="ml10">
                <el-icon><ele-Search /></el-icon>
                  {{$t('message.commonBtn.query')}}</el-button>              
            <el-button  @click="refresh()"><el-icon><ele-Refresh /></el-icon>{{$t('message.commonBtn.reset')}}
            </el-button>
          </el-form-item>
      </el-form>  
    
    <el-table v-loading="state.listLoading" :data="state.list"  @selection-change="handleSelectionChange" ref="multipleTable"
      :border="false" @row-click="toggleSelection">
      <el-table-column type="selection" width="55" /> 
      <el-table-column prop="name" label="表名" show-overflow-tooltip />
      <el-table-column prop="description" label="说明" width="150" show-overflow-tooltip />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
      <el-button @click="closeDialog">{{$t('message.commonBtn.cancel')}}</el-button>
      <el-button type="primary" @click="select()">{{$t('message.commonBtn.confirm')}}</el-button>
    </span>
    </template>   
  </el-dialog>
</template>

<script lang="ts" setup name="TableForm">
import codeGenApi from '/@/api-services/apis/generator/codeGenApi'
import { reactive, ref } from 'vue'
import { DbTableInfo } from '/@/api-services/models/codeGen';
const multipleTable=ref();
const state=reactive({
  visable:false,
  listLoading: false,
  checked: [] as Array<DbTableInfo>,
  list: [] as Array<DbTableInfo>,
  oldList: [] as Array<DbTableInfo>,
  configId:'',
  keyword:''
})
const openDialog=(configId:string)=>{
  state.visable=true;
  state.configId=configId
  initData()
}
const closeDialog=()=> {
  state.visable=false;
}
//数据表初始化
const initData=async ()=> {
  state.listLoading = true
  await codeGenApi.tableSelector({"ConfigId":state.configId}).then(res => {
    state.list = res.data.data
    state.listLoading = false
  })      
}
const query=()=>{
  filter();
}
//重置
const refresh=()=> {
  state.keyword = ''
  filter();
}
const filter=()=>{
  if(state.keyword==='')state.list=state.oldList;
  else{
    state.oldList=state.list;
    state.list=state.list.filter(item=>item.name.indexOf(state.keyword)>-1 || item.description.indexOf(state.keyword)>-1)
  }  
}
const emits= defineEmits(['select'])
const select=async ()=> {
  closeDialog();
  emits("select",state.checked)
}
const handleSelectionChange=(val:Array<DbTableInfo>)=> {
  state.checked = val
}
const toggleSelection=(row:DbTableInfo)=>{
  multipleTable.value.toggleRowSelection(row)
}
defineExpose({openDialog})
</script>
<style lang="scss" scoped>
.table-dialog {
  .el-dialog__body {
    height: 70vh;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .Good-common-search-box {
      margin-bottom: 0;
      .Good-common-search-box-right {
        padding: 10px 10px 0 0;
      }
    }
  }
}
</style>
